<template>
  <!-- @closed="editing=false" 关闭屉式菜单  重置编辑状态为不编辑 -->
  <van-action-sheet
    :value="value"
    @closed="editing=false"
    @input="$emit('input', $event)"
    title="编辑频道"
  >
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button
          v-if="!editing "
          @click="editing=true"
          size="mini"
          type="info"
          plain
        >编辑</van-button>
        <van-button
          v-else
          @click="editing=false"
          size="mini"
          type="danger"
          plain
        >完成</van-button>
      </div>
      <van-grid class="van-hairline--left">
        <van-grid-item
          v-for="(item,index) in myChannelsList"
          :key="item.id"
        >
          <span
            class="f12"
            :class="{red:index===articleIndex}"
            @click="enterChannel(index)"
          >{{item.name}}</span>
          <van-icon
            @click="delChannel(item.id,index)"
            v-show="editing&&index!==0 "
            class="btn"
            name="cross"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item
          v-for="item in optionalChannels"
          :key="item.id"
        >
          <span class="f12">{{item.name}}</span>
          <van-icon
            @click="addChannel(item)"
            class="btn"
            name="plus"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
import { getAllChannelsAPI, delChannelAPI, addChannel } from '@/api/channels'
export default {
  props: {
    // 打开/关闭的状态
    value: {
      type: Boolean,
      default: false
    },
    myChannelsList: {
      type: Array,
      default: () => []
    },
    articleIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 编辑状态
      editing: false,
      // 所有的频道数据
      allChannels: []
    }
  },
  methods: {
    async getAllChannelsFn () { // 获取所有的频道列表
      const { data: { channels } } = await getAllChannelsAPI()
      // console.log(channels)
      this.allChannels = channels
    },
    enterChannel (index) { // 点击进入频道
      // console.log(index)
      this.$emit('update:articleIndex', index)
      this.$emit('input', false)
    },
    async delChannel (id, index) { // 点击删除频道
      try {
        // 后台删除频道
        await delChannelAPI(id)
        this.$toast.success('删除成功')
        // 前端删除频道
        // 如果是当前激活的前边频道数据被删除需要更新索引值,向前进一位
        if (index < this.articleIndex) {
          this.$emit('update:articleIndex', this.articleIndex - 1)
        }
        this.myChannelsList.splice(index, 1)
      } catch (error) {
        this.$toast.fail('删除失败！')
      }
    },
    async addChannel (newItem) { // 新增频道
      // 处理接口需要的 我的频道 数据
      const newChannel = this.myChannelsList.map((item, index) => {
        return {
          id: item.id,
          seq: index
        }
      })
      newChannel.push({ ...newItem, seq: newChannel.length })
      // 把第一个推荐删除掉
      newChannel.shift()

      try {
        await addChannel(newChannel)
        // 前端渲染
        this.myChannelsList.push({ ...newItem })
        this.$toast.success('添加成功')
      } catch (error) {
        this.$toast.fail('添加失败')
      }
    }
  },
  created () {
    this.getAllChannelsFn()
  },
  computed: {
    // 可选频道
    optionalChannels () {
      // 可选频道（计算属性） = 全部频道 - 我的频道
      // 减法逻辑：
      // 1. 先遍历全部频道，拿着当前遍历的频道的ID，去我的频道中查找有没有相同ID的频道
      // 2. 查到了相同的频道ID  排除不要
      // 3. 查询不到频道的ID  这就是可选频道  追加到新数组中即可
      // Array.filter() 根据原有的数组，进行遍历，根据条件（回调函数返回值true|false）追加选项到新数组中。
      return this.allChannels.filter(item => {
        // 匹配在myChannels中不存在，就是要保留的可选频道数据=>true
        // !this.myChannels.some((my) => item.id === my.id)
        return this.myChannelsList.findIndex(myItem => myItem.id === item.id) === -1
      })
    }
  }
}
</script>
<style lang="less" scoped>
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close,
    .van-action-sheet__close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit {
    line-height: 3;
    text-align: left;
    .tip {
      font-size: 10px;
      color: #999;
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12 {
    font-size: 12px;
    color: #555;
  }
  .red {
    color: red;
  }
}
</style>
